<template>
  <div class="box">
    <div>
      <div class="tts">
        <el-row :inline="true">
          <el-col :span="4" style="text-align: center">
            <div style="color: #6364c1; font-size: 40px">{{ trainUser }}</div>
            <p style="text-align: center">培训人数</p></el-col
          >
          <el-col :span="4" style="text-align: center">
            <div style="color: #6364c1; font-size: 40px">{{ trainCost }}</div>
            <p style="text-align: center">培训费用</p></el-col
          >
        </el-row>
      </div>
    </div>
    <el-row>
      <el-form :inline="true" :model="addForm" ref="form" :rules="rules">
        <el-form-item label="姓名：">
          <el-input v-model.trim="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式：">
          <el-input v-model.trim="addForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="入住酒店：">
          <el-input placeholder="" v-model.trim="addForm.hotel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFN">查询</el-button>
          <el-button type="info" @click="reset">重置</el-button>
          <el-button type="warning" @click="handleExport">导出</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-table :data="list">
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="50"
      ></el-table-column>
      <el-table-column
        label="姓名"
        align="center"
        prop="name"
      ></el-table-column>
      <el-table-column label="性别" align="center" prop="sex">
        <template #default="scope">
          <el-tag
            v-if="scope.row.sex == 1"
            type="success"
            class="mx-1"
            effect="dark"
            round
            >女
          </el-tag>
          <el-tag v-else type="success" class="mx-1" effect="dark" round
            >男
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="联系方式"
        align="center"
        prop="phone"
      ></el-table-column>
      <el-table-column
        label="培训科目"
        align="center"
        prop="projects"
      ></el-table-column>
      <el-table-column
        label="考试科目"
        align="center"
        prop="exams"
      ></el-table-column>
      <el-table-column
        label="入住酒店"
        align="center"
        prop="hotels"
      ></el-table-column>
      <el-table-column
        label="酒店备注"
        align="center"
        prop="remarks"
      ></el-table-column>
      <el-table-column
        label="合计费用"
        align="center"
        prop="totalCost"
      ></el-table-column>
      <el-table-column
        label="缴纳费用"
        align="center"
        prop="payments"
      ></el-table-column>
    </el-table>

    <br />
    <br />
    <div>
      <pagination
        v-show="total > 0"
        v-model:page="addForm.pageNum"
        v-model:limit="addForm.pageSize"
        :total="total"
        @pagination="initData"
      />
    </div>
  </div>
</template>

<script setup>
import { trainDataList } from "@/api/train/TrainData.js";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const id = ref(route.query.id);
const form = ref();
const list = ref();
const emit = defineEmits(["xiaFN"]);
const total = ref();
const trainUser = ref();
const trainCost = ref();
const { proxy } = getCurrentInstance();

const data = reactive({
  addForm: {
    id: id.value,
    name: "",
    phone: "",
    hotel: "",
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
    place: [{ required: true, message: "请输入", trigger: "blur" }],
    event: [{ required: true, message: "请输入", trigger: "blur" }],
    remarks: [{ required: true, message: "请输入", trigger: "blur" }],
    haveDinner: [
      {
        required: true,
        message: "请选择",
        trigger: "change",
      },
    ],
    date1: [
      {
        type: "date",
        required: true,
        message: "请选择一个日期",
        trigger: "change",
      },
    ],
    date2: [
      {
        type: "date",
        required: true,
        message: "请选择一个日期",
        trigger: "change",
      },
    ],
  },
});
const { addForm, rules } = toRefs(data);

initData();
async function initData() {
  let res = await trainDataList(addForm.value);
  list.value = res.data.tableDataList.rows;
  trainUser.value = res.data.personCount;
  trainCost.value = res.data.trainCost;
  total.value = res.data.tableDataList.total;
}

// 查询
function searchFN() {
  initData();
}

// 重置
function reset() {
  addForm.value = {
    id: id.value,
    name: "",
    phone: "",
    hotel: "",
    pageNum: 1,
    pageSize: 10,
  };
  initData();
}

// 返回
function goBack() {
  emit("goBack");
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "/systemj/information/exportTrainData",
    {
      ...addForm.value,
    },
    `reserve_${new Date().getTime()}.xlsx`
  );
}
</script>

<style scope>
.box {
  padding: 30px;
}
</style>
